<template>
    <el-form
      label-width="96px"
      ref="info_modal_data_ref"
      :model="info_modal.form_data"
      :rules="info_modal.rules"
      v-if="userStore.info_data.auditStatus == 1"
    >
      <div class="box">
        <h3>人员个人信息</h3>
        <el-form-item label="姓名" prop="teacherName">
          <el-input v-model.trim="info_modal.form_data.teacherName" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="info_modal.form_data.gender" class="ml-4">
            <el-radio label="0" size="large">女</el-radio>
            <el-radio label="1" size="large">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="证件照" prop="documentImg">
          <el-text type="info" size="small"
            >本人近 1 年内正面、免冠、无妆、彩色电子证件照（白色 /
            蓝色背景，用于证件照片）</el-text
          >
          <UploadImage v-model="info_modal.form_data.documentImg" />
        </el-form-item>
        <el-form-item label="证件类型" prop="documentType">
          <IdTypeSelect v-model="info_modal.form_data.documentType" />
        </el-form-item>
        <el-form-item label="证件号码" prop="documentNumber">
          <el-input
            v-model="info_modal.form_data.documentNumber"
            placeholder="请输入证件号码"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input
            v-model="info_modal.form_data.phone"
            placeholder="请输入手机号码"
          />
        </el-form-item>
      </div>
      <div class="box">
        <h3>所属学校与地区</h3>
        <el-form-item label="所属学校" prop="schoolName">
          <el-input
            v-model="info_modal.form_data.schoolName"
            placeholder="请输入所属学校"
          />
        </el-form-item>
        <el-form-item label="所属市区" prop="county">
          <ProvinceSelect
            :isW="true"
            v-model:economize="info_modal.form_data.economize"
            v-model:market="info_modal.form_data.market"
            v-model:county="info_modal.form_data.county"
            :showCounty="true"
          />
        </el-form-item>
      </div>
      <div class="box">
        <el-form-item>
          <el-button
            type="primary"
            size="large"
            @click="handleSubmit"
            color="#1964d6"
            :loading="loading"
            >保存信息</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <el-empty v-else description="审核中或审核未通过，暂不支持使用此功能" />
  </template>
  
  <script  setup>
  import ProvinceSelect from "@/components/province-select/index.vue";
  import UploadImage from "@/components/upload-image/index.vue";
  import { AddTeacherApi } from "@/api/manage/institution";
  import { ref } from "vue";
  import { ElMessage } from "element-plus";
  import { useUserStore } from "@/store/user";
  import IdTypeSelect from "@/components/idtype-select/index.vue";
  import { handleCheckDocumentNumber } from "@/utils/check";
  
  const userStore = useUserStore();
  const loading = ref(false);
  
  const emit = defineEmits(["sub"]);
  const info_modal_data_ref = ref();
  
  const checkPhone = (rule, value, callback) => {
    const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
    if (!value) {
      callback(new Error("手机号码不能为空"));
    }
    if (phoneReg.test(value)) {
      callback();
    } else {
      callback(new Error("手机号码格式错误"));
    }
  };
  
  const checkDocumentNumber = (rule, value, callback) => {
    if (!value) {
      callback(new Error("证件号不能为空"));
      return;
    }
    if (!info_modal.value.form_data.documentType) {
      callback(new Error("请选择证件类型"));
      return;
    }
    if (
      !handleCheckDocumentNumber(info_modal.value.form_data.documentType, value)
    ) {
      callback(new Error("证件号格式错误"));
      return;
    }
    callback();
  };
  
  /**
   * 信息弹窗数据
   */
  const info_modal = ref({
    form_data: {
      gender: "1",
    },
    rules: {
      teacherName: [
        {
          required: true,
          message: "请请输入姓名",
          trigger: "blur",
        },
      ],
      gender: [
        {
          required: true,
          message: "请选择性别",
          trigger: "blur",
        },
      ],
      documentImg: [
        {
          required: true,
          message: "请上传证件照",
          trigger: "blur",
        },
      ],
      documentType: [
        {
          required: true,
          message: "请选择证件类型",
          trigger: "blur",
        },
      ],
      documentNumber: [
        {
          required: true,
          validator: checkDocumentNumber,
          trigger: "blur",
        },
      ],
      phone: [
        {
          required: true,
          validator: checkPhone,
          trigger: "blur",
        },
      ],
      schoolName: [
        {
          required: true,
          message: "请输入所属学校",
          trigger: "blur",
        },
      ],
      county: [
        {
          required: true,
          message: "请选择所属市区",
          trigger: "blur",
        },
      ],
    },
  });
  
  const handleRest = () => {
    info_modal.value.form_data = {
      teacherName: "",
      gender: "1",
      documentImg: "",
      documentType: "",
      documentNumber: "",
      phone: "",
      schoolName: "",
      economize: 0,
      market: 0,
      county: 0,
    };
  };
  /**
   * 获取学生信息
   */
  const handleGetInfo = async (row) => {
    info_modal.value.form_data = row;
    return;
    let res = await GetStudentInfoApi({
      teacherId: row.teacherId,
    });
    if (res.success) {
      info_modal.value.form_data = res.entity;
    }
  };
  
  /**
   * 保存信息
   */
  const handleSubmit = async () => {
    info_modal_data_ref.value.validate(async (r) => {
      if (!r) {
        return;
      }
      loading.value = true;
  
      let res;
      res = await AddTeacherApi(info_modal.value.form_data);
      if (res.success) {
        ElMessage.success(res.message);
        emit("sub", res);
      } else {
        ElMessage.error(res.message);
      }
      loading.value = false;
    });
  };
  
  defineExpose({
    handleGetInfo,
    handleRest,
  });
  </script>
  
  <style lang="scss" scoped>
  .box {
    padding-bottom: 32px;
    padding-left: 32px;
    width: 640px;
    h3 {
      margin-bottom: 16px;
    }
  }
  </style>